<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">添加关键字回复</div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">关键字 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="data[keyword]"
                                           value="" required>
                                    <small>关键字设置为 * ，为无效关键字的回复</small>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">消息类型 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select v-model="type" name="data[type]" required style="width:200px;">
                                        <option value="text">文字消息</option>
                                        <option value="image">图片消息</option>
                                        <option value="voice">语音消息</option>
										<option value="video">视频消息</option>
										<!--<option value="music">音乐消息</option>-->
										<option value="news">图文消息</option>
                                    </select>
                                </div>
                            </div>
                            <div v-if="type === 'text'" class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">回复内容 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <textarea name="data[content][description]" rows="5" placeholder="请输入回复内容"></textarea>
									<small>换行显示用“回车”</small>
                                </div>
                            </div>
                            <div v-if="type === 'news'" class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">图文标题 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="data[content][title]"
                                           value="" required>
                                </div>
                            </div>
                            <div v-if="type === 'news'" class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">图文描述 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="data[content][description]"
                                           value="" required>
                                </div>
                            </div>
                            <div v-if="type === 'news'" class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label">链接地址 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="data[content][url]"
                                           value="">
                                    <small>为空时：默认为站点网址</small>
                                </div>
                            </div>
                            <div v-if="type !== 'text'" class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">MEDIA_ID </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="data[content][media_id]"
                                           value="" required>
                                    <small v-if="type === 'image'"><a href="{:url('food.wechat.material.image/index')}">点此上传图片素材，或获取 MEDIA_ID</a></small>
                                    <small v-if="type === 'voice'"><a href="{:url('food.wechat.material.voice/index')}">点此上传语音素材，或获取 MEDIA_ID</a></small>
                                    <small v-if="type === 'video'"><a href="{:url('food.wechat.material.video/index')}">点此上传视频素材，或获取 MEDIA_ID</a></small>
                                    <small v-if="type === 'news'"><a href="{:url('food.wechat.material.text/index')}">点此上传图文素材，或获取 MEDIA_ID</a></small>
                                </div>
                            </div>							
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">是否开启 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" name="data[is_open]" value="1" data-am-ucheck
                                               checked>
                                        开启
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="data[is_open]" value="0" data-am-ucheck>
                                        关闭
                                    </label>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button type="submit" class="j-submit am-btn am-btn-secondary">提交
                                    </button>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/assets/plugins/vue/vue.min.js"></script>
<script>
    $(function () {

    	// 渲染页面
		new Vue({
			el: '#my-form',
			data: {
				type:'text'
			}
		});

        $('#my-form').formPost();

    });
</script>
